<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/mayioa/css/mayioa-ui.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/datapicker/datepicker3.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/layui/css/layui.css}" rel="stylesheet"/>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-po-edit">
			<div class="form-group">
				<label class="col-sm-3 control-label ">立项编号：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text"  name="prjCreateCode"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label ">PO编号：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text"  name="poCode" id="poCode"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label ">项目名称：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text"  name="poName" id="poName"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label ">合同类型：</label>
				<div class="col-sm-8">
					<select id="prjType"  name="prjType" class="form-control m-b"  th:with="type=${@dict.getType('po_type')}">
						<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" ></option>
					</select>
				</div>

			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">PDU：</label>
				<div class="col-sm-8">
					<select id="pdu"  name="pdu" class="form-control m-b" th:with="type=${@dict.getType('human_pdu')}">
						<option th:each="dict : ${type}" th:unless="${dict.dictValue} eq '0'" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" ></option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">地域：</label>
				<div class="col-sm-8">
					<select id="region"  name="region" class="form-control m-b" th:with="type=${@dict.getType('check_region')}">
						<option th:each="dict : ${type}" th:unless="${dict.dictValue} eq '0'" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" ></option>
					</select>
				</div>

			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">合同状态：</label>
				<div class="col-sm-8">
					<select id="status"  name="status" class="form-control m-b" th:with="type=${@dict.getType('po_status')}">
						<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" ></option>
					</select>
				</div>

			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">华为PM：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="hwPM" id="hwPM">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">蚂蚁PM：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="isoftPM" id="isoftPM">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">PO金额：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="poAmounts" id="poAmounts">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">月度人力：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="monthPeoples" id="monthPeoples">
				</div>
			</div>
			<div class="col-md-12">
				<div class="form-group">
					<label class="col-sm-3 control-label">开始日期：</label>
					<div class="col-sm-8">
						<div class="form-group">
							<div class="input-group date"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
								<input type="text" id="startDate" name="startDate" class="form-control" readonly="true">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-12">
				<div class="form-group">
					<label class="col-sm-3 control-label">结束日期：</label>
					<div class="col-sm-8">
						<div class="form-group">
							<div class="input-group date"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
								<input type="text" id="endDate" name="endDate" class="form-control" readonly="true">
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">PO消耗金额：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="poConsumedAmounts" id="poConsumedAmounts">
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">PO剩余金额：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" readonly="true" name="poSurplusAmounts" id="poSurplusAmounts">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">PO消耗百分比(%)：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" readonly="true" name="poConsumedRate" id="poConsumedRate">
				</div>
			</div>
			<div class="col-md-12">
				<div class="form-group">
					<label class="col-sm-3 control-label">PO消耗预计完成日期：</label>
					<div class="col-sm-8">
						<div class="form-group">
							<div class="input-group date"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
								<input type="text" id="poConsumeDate" name="poConsumeDate" class="form-control" readonly="true">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">新合同风险级别：</label>
				<div class="col-sm-8">
					<select id="newPORisk"  name="newPORisk" class="form-control m-b" th:with="type=${@dict.getType('risk_level')}">
						<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" ></option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">新合同进展：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="newPORemark" id="newPORemark">
				</div>
			</div>
		</form>
	</div>
	<div th:include="include::footer"></div>
	<script th:src="@{/ajax/libs/select/select2.js}"></script>
	<script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
	<script th:src="@{/ajax/libs/iCheck/icheck.min.js}"></script>
	<script th:src="@{/ajax/libs//datapicker/bootstrap-datepicker.js}"></script>
	<script th:src="@{/ajax/libs/beautifyhtml/beautifyhtml.js}"></script>

	<script>
		 $("#startDate").datepicker({
			todayBtn: "linked",
			keyboardNavigation: !1,
			forceParse: !1,
			calendarWeeks: !0,
			autoclose: !0
		});
 		$("#endDate").datepicker({
			todayBtn: "linked",
			keyboardNavigation: !1,
			forceParse: !1,
			calendarWeeks: !0,
			autoclose: !0
		});
		$("#poConsumeDate").datepicker({
			todayBtn: "linked",
			keyboardNavigation: !1,
			forceParse: !1,
			calendarWeeks: !0,
			autoclose: !0
		});

        $("#form-po-edit").validate({
        	rules:{
        		prjCreateCode:{required:true},
				poCode:{required:true},
				prjType:{required:true},
				pdu:{required:true},
				region:{required:true},
				status:{required:true},
				hwPM:{required:true},
				isoftPM:{required:true},
				poAmounts:{required:true,number:true},
				monthPeoples:{required:true,digits:true},
				startDate:{required:true},
				endDate:{required:true},
				poConsumedAmounts:{required:true,number:true},
				poSurplusAmounts:{required:true,number:true},
				poConsumedRate:{required:true},
				poConsumeDate:{required:true},
				newPORisk:{required:true},
				newPORemark:{required:true}
        	},
        	messages: {
        		"poCode": {
                    remote: "PO编码不能为空"
                }
            },
        	submitHandler:function(form){
        		submitHandler();
        	}
        });

        function computeConsumeRate(){
			var poAmounts =  $("input[name='poAmounts']").val();
			var poConsumedAmounts = $("input[name='poConsumedAmounts']").val();
			var poSurplusAmounts = 0;
			var poConsumedRate = 0.0;
			poSurplusAmounts =  Number(poAmounts) - Number(poConsumedAmounts) ;
			if(Number(poAmounts)!=0){
				poConsumedRate = Number(poConsumedAmounts)/Number(poAmounts)*100;
				poConsumedRate = poConsumedRate.toFixed(2);
			}

			 $("input[name='poConsumedAmounts']").val(poConsumedAmounts);
			 $("input[name='poSurplusAmounts']").val(poSurplusAmounts.toFixed(2));
			 $("input[name='poConsumedRate']").val(poConsumedRate);
		}

		$("#poConsumedAmounts").change(function(){
			computeConsumeRate();
		});
		$("#poAmounts").change(function(){
			computeConsumeRate();
		});



        function submitHandler() {
	        if ($.validate.form()) {
	        	add();
	        }
	    }

        function add() {
        	var prjCreateCode = $("input[name='prjCreateCode']").val();
        	var poCode = $("input[name='poCode']").val();
        	var poName = $("input[name='poName']").val();
        	var prjType = $("#prjType option:selected").val();
        	var pdu = $("#pdu option:selected").val();
        	var region = $("#region option:selected").val();
        	var status = $("#status option:selected").val();
        	var hwPM = $("input[name='hwPM']").val();
        	var isoftPM = $("input[name='isoftPM']").val();
			var poAmounts =  $("input[name='poAmounts']").val();
			var monthPeoples = $("input[name='monthPeoples']").val();
			var startDate = $("input[name='startDate']").val();
			var endDate = $("input[name='endDate']").val();
			var poConsumedAmounts = $("input[name='poConsumedAmounts']").val();
			var poSurplusAmounts = $("input[name='poSurplusAmounts']").val();
			var poConsumedRate = $("input[name='poConsumedRate']").val();
			var reg = new RegExp("%","g");//g,表示全部替换
			poConsumedRate = poConsumedRate.replace(reg,"");
			var poConsumeDate = $("input[name='poConsumeDate']").val();
			var newPORisk = $("#newPORisk option:selected").val();
			var newPORemark = $("input[name='newPORemark']").val();
        	$.ajax({
        		cache : true,
        		type : "POST",
        		url : ctx + "po/board/add",
        		data : {
        			"prjCreateCode":prjCreateCode,
					"poCode":poCode,
					"poName":poName,
					"prjType":prjType,
					"pdu":pdu,
					"region":region,
					"status":status,
					"hwPM":hwPM,
					"isoftPM":isoftPM,
					"poAmounts":poAmounts,
					"monthPeoples":monthPeoples,
					"startDate":startDate,
					"endDate":endDate,
					"poConsumedAmounts":poConsumedAmounts,
					"poSurplusAmounts":poSurplusAmounts,
					"poConsumedRate":poConsumedRate,
					"poConsumeDate":poConsumeDate,
					"newPORemark":newPORemark,
					"newPORisk":newPORisk
        		},
        		async : false,
        		error : function(request) {
        			$.modal.alertError("系统错误");
        		},
        		success : function(data) {
        			$.operate.saveSuccess(data);
        		}
        	});
        }


    </script>
</body>
</html>
